import {  Graphics, Text, Container, Sprite , Texture} from 'pixi.js'
import   { createRenderer } from 'vue'

const  render =createRenderer({  
  createElement(type) {
    console.log('type:', type);
    let element;
    if (type === 'rect') {
      element = new Graphics()
      element.beginFill(0xff0000)
      element.drawRect(0, 0, 300, 300)
      element.endFill()
    }
    if (type === 'circle') {
      element = new Graphics()
      element.beginFill(0x00ff00)
      element.drawCircle(150, 150, 100)
      element.endFill()
    }
    if (type === 'Container') {
      element = new Container()
    }
    if (type === 'Sprite') {
      element = new Sprite()
    }
    return element
  },
  insert(el, parent) {
    console.log('el， parent:', el, parent);
    parent.addChild(el)
  },
  patchProp (el, key, prveValue, nextValue) {
    switch(key) {
      case 'texture': 
        el.texture = Texture.from(nextValue)
        break;
      case 'onClick': 
        el.on('pointertap', nextValue)
      break;
      default: 
        el[key] = nextValue
    }
   
  },
  setElementText(el, text){
    const cText = new Text(text)
    cText.x = 30
    cText.y = 30
    el.addChild(cText)
  },
  createText(text) {
    return new Text(text)
  } ,
  remove(el) {
    const parent = el.parent
    if (parent) {
      parent.removeChild(el)
    }
  },
  createComment() {},
  parentNode(){},
  nextSibling(){}
})

export  function createApp(rootComponent) {
  return render.createApp(rootComponent)
}